<template>
  <el-dialog
    title="收货地址"
    width="50%"
    :visible.sync="dialogFormVisible"
    :before-close="beforeClose"
    v-loading="loading"
  >
    <!-- 第一部分 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">【题型】:
          {{data.questionType|numberToQuestionType}}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【编号】: {{data.id}} </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【难度】: {{data.difficulty|numberToQuestionDifficulty}}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【标签】: {{data.tags}}</div>
      </el-col>
    </el-row>
    <el-row
      :gutter="20"
      style="padding: 10px 0px;border-bottom:2px solid #e8e8e8"
    >
      <el-col :span="6">
        <div class="grid-content bg-purple">【学科】: {{data.directoryName}}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【目录】: {{data.direction}}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【方向】: {{data.direction}}</div>
      </el-col>
    </el-row>
    <!-- 第二部分 -->
    <el-row
      :gutter="20"
      style="padding: 15px 0px;border-bottom:2px solid #e8e8e8"
    >
      <el-col
        :span="20"
        style="padding-bottom: 15px;"
      >
        <div class="grid-content bg-purple">【题干】:</div>
      </el-col>
      <el-col
        :span="20"
        style="padding-bottom: 15px;"
      >
        <div
          class="grid-content bg-purple"
          v-html="data.question"
        ></div>
      </el-col>
      <!-- 多选部分 -->
      <el-col>
        <el-checkbox-group
          v-if="data.questionType === '1'||data.questionType === '2'"
          v-model="checkedCities"
        >
          <el-checkbox
            style="display: block;margin-bottom:12px"
            disabled
            v-for="city in cities"
            :label="city"
            :key="city"
          >{{city}}</el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>
    <!-- 第三部分 -->
    <el-row style="padding: 15px 0px;border-bottom:2px solid #e8e8e8">
      【参考答案】：<el-button
        :disabled="videoDisabled"
        type="danger"
        @click="isVideoShow = true"
      >视频答案预览</el-button>
      <el-col
        style="margin-top:20px;"
        v-if="isVideoShow"
      >
        <video
          :src="data.videoURL"
          controls="controls"
          class="video"
        ></video>
      </el-col>
    </el-row>
    <!-- 第四部分 答案解析-->
    <el-row style="padding: 15px 0px;border-bottom:2px solid #e8e8e8">
      <el-col>
        【答案解析】: <span
          v-html="data.answer"
          style="display:inline-block"
        ></span>
      </el-col>
    </el-row>
    <!-- 第五部分 题目备注 -->
    <el-row style="padding: 15px 0px;border-bottom:2px solid #e8e8e8">
      <el-col>
        【题目备注】: {{data.remarks}}
      </el-col>
    </el-row>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        @click="$emit('update:dialogFormVisible',false)"
      >关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsPreview',
  props: {
    dialogFormVisible: {
      type: Boolean,
      required: true
    },
    id: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      data: {},
      loading: true,
      isVideoShow: false,
      checkedCities: [], // 多选选中
      cities: [] // 多选列表
    }
  },
  components: {

  },
  computed: {
    // 用于无视频讲解的是解答视频按钮禁用
    videoDisabled () {
      return this.data.videoURL === ''
    }
  },
  created () {
    this.getQuestionDetail()
  },
  methods: {
    beforeClose () {
      this.$emit('update:dialogFormVisible', false)
    },
    // 获取弹窗题目详情
    async getQuestionDetail () {
      const data = await detail({ id: this.id })
      this.data = data.data
      // 给arrCities cities 数据赋值使选项列表显示
      if (data.data.options.length !== 0) {
        const arrCheckedCities = []
        const arrCities = []
        data.data.options.forEach(item => {
          if (item.isRight === 1) {
            arrCheckedCities.push(item.title)
          }
          arrCities.push(item.title)
        })
        this.cities = arrCities
        this.checkedCities = arrCheckedCities
      }
      this.loading = false
    }
  }
}
</script>

<style scoped lang='scss'></style>
